import React, { Component } from 'react'
import { TabBar } from 'antd-mobile';
import { withRouter } from "react-router-dom"

class TabBarExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'index',
      hidden: false,
      fullScreen: true,
    };
  }

  render() {
    return (
      <div className="grabTabBar" style={this.state.fullScreen ? { position: 'fixed', height: '40', width: '100%', bottom: 0 } : { height: 400 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#ff3f78"
          barTintColor="#fafafa"
          hidden={this.state.hidden}
          style={{ fontSize: '18px' }}
        >
          <TabBar.Item
            title="限时快抢"
            key="grabToday"
            icon={<i className='iconfont icon-gouwu' style={{ fontSize: '18px' }}></i>}
            selectedIcon={<i className='iconfont icon-gouwu' style={{ fontSize: '18px' }}></i>}
            selected={this.props.location.pathname === '/grabToday'}
            onPress={() => this.props.history.push('/grabToday')}
          >
            {this.props.location.pathname === '/grabToday'&&this.props.children}
          </TabBar.Item>
          <TabBar.Item
            icon={<i className='iconfont icon-rexiao' style={{ fontSize: '18px' }} />}
            selectedIcon={<i className='iconfont icon-rexiao' style={{ fontSize: '18px' }} />}
            title="即将售罄"
            key="sale"
            selected={this.props.location.pathname === '/sale'}
            onPress={() => this.props.history.push('/sale')}
          >
            {this.props.location.pathname === '/sale'&&this.props.children}
          </TabBar.Item>
          <TabBar.Item
            icon={<i className='iconfont icon-wode2' style={{ fontSize: '18px' }} />}
            selectedIcon={<i className='iconfont icon-wode2' style={{ fontSize: '18px' }} />}
            title="我的快抢"
            key="myGrab"
            selected={this.props.location.pathname === '/myGrab'}
            onPress={() => this.props.history.push('/myGrab')}
          >
            {this.props.children}
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}
export default withRouter(TabBarExample)